<template>
    <div class="ml-16px mr-16px content-container">
        <div class="flex items-center pt-26px pl-26px pr-26px">
            <Remind v-if="isShowRemind" @update:data="isShowRemind = !isShowRemind">
                <template #title>
                    <b>温整提示：</b> 
                </template>
                <template #content>
                    1、不能主动发消息给用户，仅支持回复消息，在用户未发送下一条消息给你之前，48小时内可中用户发送6条消息；<br>
2、用户进入消息会话页面可以发送一条消息给用户，该消息支持设置成自动发送；<br>
3、回复私信时，严禁发送微信号给客户，包括但不限于VX、手机号同威信等暗示/擦边球行为；<br>
4、因用户违规造成的限流、封号等处罚，风险损失及责任完全由用户自担。 
                </template>
            </Remind>
        </div>
        <div class="pl-36px pt-26px pr-26px text-14px font-bold level-2-title">
            触发数据
        </div>
        <div class="flex pl-26px pt-16px pr-26px trigger-data">
            <div class="flex flex-col justify-center w-240px h-180px mr-12px trigger-data-left">
                <p>{{ state.triggerDatas[0].name }}<el-tooltip placement="top" :content="state.triggerDatas[0].content">
                            <svg-icon size="14px" icon-class="information-2-fill" class="ml-5px"></svg-icon>
                        </el-tooltip></p>
                <div class="flex items-center mt-25px mb-25px">
                    <div class="flex flex-center icon"><svg-icon size="20px" icon-class="yuan"></svg-icon></div>
                    <b>{{ state.triggerDatas[0].value }}</b>
                </div>
                <p>昨日新增：<b>36</b> 次</p>
            </div>
            <div class="flex-1 h-180px trigger-data-right">
                <ul>
                    <li v-for="item in state.triggerDatas.slice(1)" :key="item.id">
                        <p>{{ item.name }}<el-tooltip placement="top" :content="item.content" v-if="item.content != ''">
                            <svg-icon size="14px" icon-class="information-2-fill" class="ml-5px"></svg-icon>
                        </el-tooltip></p>
                        <span>{{ item.value }}</span>
                    </li>
                </ul>
            </div>
        </div>
        <div class="pl-36px pt-26px pr-26px text-14px font-bold level-2-title">
            智能接待
        </div>
        <div class="flex pl-26px pt-16px pr-26px pb-26px intelligent-reception">
            <div class="flex justify-between items-center item">
                <div class="flex items-center">
                    <div class="flex flex-center icon">
                        <i></i>
                    </div>
                    <div>私信</div>
                </div>
                <button>去设置</button>
            </div>
            <div class="flex justify-between items-center item">
                <div class="flex items-center">
                    <div class="flex flex-center icon">
                        <i></i>
                    </div>
                    <div>进入会话</div>
                </div>
                <button>去设置</button>
            </div>
            <div class="flex justify-between items-center item">
                <div class="flex items-center">
                    <div class="flex flex-center icon">
                        <i></i>
                    </div>
                    <div>评论</div>
                </div>
                <button>去设置</button>
            </div>
        </div>
    </div>
    <div class="ml-16px mr-16px mt-26px mb-26px content-container">
        <div class="pl-36px pt-26px pr-26px pb-26px text-14px font-bold level-2-title">
            数据统计分析
        </div>
    </div>
</template>

<script setup lang="ts">
const isShowRemind = ref(true)

const state = reactive({
    triggerDatas:[
        {
            id:1,
            name:'商机线索总量',
            value:86,
            content:'私信/评论/拓客裂变/留资/电话等行为线索量'
        },
        {
            id:2,
            name:'私信量',
            value:128,
            content:''
        },
        {
            id:3,
            name:'进入会话量',
            value:90,
            content:''
        },
        {
            id:4,
            name:'评论量',
            value:279,
            content:''
        },
        {
            id:5,
            name:'进入主页量',
            value:62,
            content:''
        },
        {
            id:6,
            name:'电话量',
            value:25,
            content:''
        },
        {
            id:7,
            name:'私信留电话量',
            value:43,
            content:''
        },
        {
            id:8,
            name:'主页留电话量',
            value:17,
            content:''
        },
        {
            id:9,
            name:'其他留电话量',
            value:56,
            content:''
        },
    ]
})
</script>

<style lang="scss" scoped>
.trigger-data{
    &-left{
        border-radius: 6px;
        padding-left: 36px;
        background-color:var(--mainBg);
        p{
            font-size: 14px;
            color: #999;
            b{
                font-size: 18px;
                font-family: "DIN Web";
                color: var(--title-color);
            }
        }
        .icon{
            width: 36px;
            height: 36px;
            margin-right: 10px;
            border-radius: 50%;
            background-image:-moz-linear-gradient(-90deg,rgb(64,127,255) 0%,rgb(64,176,255) 100%);
            background-image:-webkit-linear-gradient(-90deg,rgb(64,127,255) 0%,rgb(64,176,255) 100%);
            background-image:-ms-linear-gradient(-90deg,rgb(64,127,255) 0%,rgb(64,176,255) 100%);
            & + b{
                font-size: 32px;
                font-family: "DIN Web";
                color: var(--title-color);
            }
        }
    }
    &-right{
        border-radius: 6px;
        background-color:var(--mainBg);
        ul{
            overflow: hidden;
            height: 100%;
            li{
                width:25%;
                height: 50%;
                float: left;
                padding: 0 0 0 36px;
                display: flex;
                flex-direction: column;
                justify-content:center;
                p{
                    font-size: 14px;
                    color: #999;
                }
                span{
                    font-size: 18px;
                    font-weight: bold;
                    font-family: "DIN Web";
                    color: var(--title-color);
                    margin-top: 12px;
                }
            }
        }
    }
}
.intelligent-reception{
    .item{
        width: 300px;
        height: 80px;
        border-radius: 6px;
        margin-right: 12px;
        padding: 0 20px;
        position:relative;
        background-image:-moz-linear-gradient(-90deg,rgb(255,142,80) 0%,rgb(255,177,100) 100%);
        background-image:-webkit-linear-gradient(-90deg,rgb(255,142,80) 0%,rgb(255,177,100) 100%);
        background-image:-ms-linear-gradient(-90deg,rgb(255,142,80) 0%,rgb(255,177,100) 100%);
        .icon{
            width: 50px;
            height: 50px;
            border-radius: 16px;
            background-color: #fff;
            margin-right: 15px;
            & > i{
                width: 30px;
                height:26px;
                background:url('@/assets/images/email.png') no-repeat 0 0;
                background-size: contain;
            }
            &+div{
                font-size: 14px;
                font-weight: bold;
                color: #fff;
            }
        }
        button{
            font-size: 14px;
            height: 32px;
            padding: 0 18px;
            color: #ff823d;
            border-radius: 16px;
            background: #fff;
            position:relative;
            z-index: 9;
        }
        &:nth-child(2){
            background-image:-moz-linear-gradient(-90deg,rgb(248,118,117) 0%,rgb(255,144,144) 100%);
            background-image:-webkit-linear-gradient(-90deg,rgb(248,118,117) 0%,rgb(255,144,144) 100%);
            background-image:-ms-linear-gradient(-90deg,rgb(248,118,117) 0%,rgb(255,144,144) 100%);
            .icon{
                i{
                    width: 30px;
                    height:29px;
                    background:url('@/assets/images/talk.png') no-repeat 0 0;
                    background-size: contain;
                }
            }
            button{
                color: #f58584;
            }
        }
        &:nth-child(3){
            background-image:-moz-linear-gradient(-90deg,rgb(83,182,137) 0%,rgb(114,197,160) 100%);
            background-image:-webkit-linear-gradient(-90deg,rgb(83,182,137) 0%,rgb(114,197,160) 100%);
            background-image:-ms-linear-gradient(-90deg,rgb(83,182,137) 0%,rgb(114,197,160) 100%);
            .icon{
                i{
                    width: 26px;
                    height:26px;
                    background:url('@/assets/images/comment.png') no-repeat 0 0;
                    background-size: contain;
                }
            }
            button{
                color: #53b78a;
            }
        }
        &::after{
            content:'';
            position:absolute;
            top: 0;
            right:0;
            z-index:0;
            width: 172px;
            height: 80px;
            background:url('@/assets/images/tm-bg.png') no-repeat 0 0;
        }
    }
}
</style>